<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-card style="height: calc(100vh - 243px)">
          <div slot="header">
            <span>缓存列表</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              icon="el-icon-refresh-right"
              @click="refreshCacheNames()"
            ></el-button>
          </div>
          <el-table
            v-loading="loading"
            :data="cacheNames"
            :height="tableHeight"
            highlight-current-row
            @row-click="getCacheKeys"
            style="width: 100%"
          >
            <el-table-column label="序号" width="60" type="index"></el-table-column>

            <el-table-column
              label="缓存名称"
              align="center"
              prop="cacheName"
              :show-overflow-tooltip="true"
              :formatter="nameFormatter"
            ></el-table-column>

            <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
            <el-table-column label="操作" width="60" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleClearCacheName(scope.row)"> </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card style="height: calc(100vh - 243px)">
          <div slot="header">
            <span>键名列表</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              icon="el-icon-refresh-right"
              @click="refreshCacheKeys()"
            ></el-button>
          </div>
          <el-table
            v-loading="subLoading"
            :data="cacheKeys"
            :height="tableHeight"
            highlight-current-row
            @row-click="handleCacheValue"
            style="width: 100%"
          >
            <el-table-column label="序号" width="60" type="index"></el-table-column>
            <el-table-column label="缓存键名" align="center" :show-overflow-tooltip="true" :formatter="keyFormatter"> </el-table-column>
            <el-table-column label="操作" width="60" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleClearCacheKey(scope.row)"> </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card :bordered="false" style="height: calc(100vh - 243px)">
          <div slot="header">
            <span>缓存内容</span>
            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-refresh-right" @click="handleClearCacheAll()"
              >清理全部</el-button
            >
          </div>
          <el-form :model="cacheForm">
            <el-row :gutter="32">
              <el-col :offset="1" :span="22">
                <el-form-item label="缓存名称:" prop="cacheName">
                  <el-input v-model="cacheForm.cacheName" :readOnly="true" />
                </el-form-item>
              </el-col>
              <el-col :offset="1" :span="22">
                <el-form-item label="缓存键名:" prop="cacheKey">
                  <el-input v-model="cacheForm.cacheKey" :readOnly="true" />
                </el-form-item>
              </el-col>
              <el-col :offset="1" :span="22">
                <el-form-item label="缓存内容:" prop="cacheValue">
                  <el-input v-model="cacheForm.cacheValue" type="textarea" :rows="8" :readOnly="true" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';

const baseApiUrl = 'api/cache/metrics';

export default {
  name: 'CacheList',
  data() {
    return {
      cacheNames: [],
      cacheKeys: [],
      cacheForm: {},
      loading: true,
      subLoading: false,
      nowCacheName: '',
      tableHeight: window.innerHeight - 200,
    };
  },
  created() {
    this.getCacheNames();
  },
  methods: {
    /** 查询缓存名称列表 */
    getCacheNames() {
      this.loading = true;
      axios.get(baseApiUrl + '/getNames').then(response => {
        console.log('缓存列表,', response.data);
        this.cacheNames = response.data;
        this.loading = false;
      });
    },
    /** 刷新缓存名称列表 */
    refreshCacheNames() {
      this.getCacheNames();
      this.$alert('刷新缓存列表成功', '成功', {
        confirmButtonText: '确定',
        callback: action => {},
      });
    },
    /** 清理指定名称缓存 */
    handleClearCacheName(row) {
      axios.delete(baseApiUrl + '/clearCacheName/' + row.cacheName).then(response => {
        this.$alert('清理缓存名称[' + this.nowCacheName + ']成功', '成功', {
          confirmButtonText: '确定',
          callback: action => {},
        });
        this.getCacheKeys();
      });
    },
    /** 查询缓存键名列表 */
    getCacheKeys(row) {
      const cacheName = row !== undefined ? row.cacheName : this.nowCacheName;
      if (cacheName === '') {
        return;
      }
      this.subLoading = true;
      axios.get(baseApiUrl + '/getKeys/' + cacheName).then(response => {
        this.cacheKeys = response.data;
        this.subLoading = false;
        this.nowCacheName = cacheName;
      });
    },
    /** 刷新缓存键名列表 */
    refreshCacheKeys() {
      this.getCacheKeys();
      this.$alert('刷新键名列表成功', '成功', {
        confirmButtonText: '确定',
        callback: action => {},
      });
    },
    /** 清理指定键名缓存 */
    handleClearCacheKey(cacheKey) {
      axios.delete(baseApiUrl + '/clearCacheKey/' + cacheKey).then(response => {
        this.$alert('清理缓存键名[' + cacheKey + ']成功', '成功', {
          confirmButtonText: '确定',
          callback: action => {},
        });
        this.getCacheKeys();
      });
    },
    /** 列表前缀去除 */
    nameFormatter(row) {
      return row.cacheName.replace(':', '');
    },
    /** 键名前缀去除 */
    keyFormatter(cacheKey) {
      return cacheKey.replace(this.nowCacheName, '');
    },
    /** 查询缓存内容详细 */
    handleCacheValue(cacheKey) {
      console.log('cacheKey: ', cacheKey);
      axios.get(baseApiUrl + '/getValue/' + this.nowCacheName + '/' + cacheKey.replace(this.nowCacheName + '#', '')).then(response => {
        this.cacheForm = response.data;
      });
    },
    /** 清理全部缓存 */
    handleClearCacheAll() {
      clearCacheAll().then(response => {
        this.$alert('清理全部缓存成功', '成功', {
          confirmButtonText: '确定',
          callback: action => {},
        });
      });
    },
  },
};
</script>
